<template>
  <div class="box">
    <a-form-model>
      <a-form-model-item label="姓名" reuired :labelCol="{ span: 4 }" :wrapperCol="{ span: 10 }">
        <a-input v-model="name" placeholder="请输入姓名"></a-input>
        <em class="ts">用于展示的名称</em>
      </a-form-model-item>
      <a-form-model-item label="登录账户" reuired :labelCol="{ span: 4 }" :wrapperCol="{ span: 10 }">
        <a-input v-model="username" placeholder="请输入登录账户"></a-input>
        <em class="ts">用于登录的账号</em>
      </a-form-model-item>
      <a-form-model-item label="登录密码" reuired :labelCol="{ span: 4 }" :wrapperCol="{ span: 10 }">
        <a-input v-model="pass" placeholder="请输入新密码"></a-input>
      </a-form-model-item>
      <a-form-model-item label="管理员信息" :labelCol="{ span: 4 }" :wrapperCol="{ span: 10 }">
        <a-avatar shape="square" :size="64" icon="user" :src="saas_user_tx" />
        <div style="display: flex; padding-top: 10px">
          <a-input :value="saas_user_name" disabled></a-input>
          <a-button type="primary" @click="visibleUser = true" style="margin-left: 8px"> 选择 </a-button>
        </div>
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 24 }">
        <a-divider style="margin: 0 0 40px 0" />
        <div style="display: flex; justify-content: center">
          <a-button :loading="btnLoading" type="primary" @click="submitForm" style="margin-right: 8px"> 保存 </a-button>
          <a-button @click="$router.back()"> 取消 </a-button>
        </div>
      </a-form-model-item>
    </a-form-model>

    <!-- 选择用户弹窗 -->
    <a-modal title="选择用户" style="width: 300px" v-model="visibleUser" :destroyOnClose="true" :footer="null">
      <div style="margin-bottom: 10px">
        <a-input-search @search="getList()" placeholder="输入昵称搜索" v-model="keyword" allowClear enter-button />
      </div>

      <a-table
        rowKey="id"
        :columns="userColumns"
        :data-source="loadUserData"
        :pagination="{
          total: this.totalCount,
          showSizeChanger: false,
          onChange: this.getList,
        }"
      >
        <span slot="baseinfo" slot-scope="text, record">
          <img style="width: 40px; heigth: 40px; border-radius: 3px; margin-right: 5px" :src="record.avatar" />
          <span :length="20" tooltip>{{ record.name }}</span>
        </span>
        <span slot="action" slot-scope="text, record">
          <a-button type="primary" size="small" @click="onSelect(record)"> 选择 </a-button>
        </span>
        <span slot="status" slot-scope="scope">
          <div class="status">
            <span :class="scope.is_disable == 0 ? 'open' : 'close'"></span>
            <span>{{ scope.is_disable == 0 ? '已启用' : '已禁用' }}</span>
          </div>
        </span>
      </a-table>
    </a-modal>
  </div>
</template>

<script>
import { resetPass, getPass } from '@/api/store'
import { getSelectUserList } from '@/api/user'

export default {
  props: {
    storeId: {
      type: [Number, String],
      default: 0,
    },
  },

  data() {
    return {
      username: '',
      name: '',
      pass: '',

      userColumns: [
        {
          title: 'ID',
          dataIndex: 'id',
        },
        {
          title: '用户信息',
          scopedSlots: { customRender: 'baseinfo' },
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
        },
      ],

      loadUserData: [],
      totalCount: 0,
      visibleUser: false,
      keyword: '',
      saas_user_name: '',
      saas_user_id: '',
      saas_user_tx: '',
    }
  },

  async created() {
    const res = await getPass({
      store_id: this.storeId,
    })

    if (res.code === 0) {
      this.username = res.data.username
      this.name = res.data.name
      this.saas_user_id = res.data.saas_user_id

      if (res.data.saas_user) {
        this.saas_user_name = res.data.saas_user.name
        this.saas_user_tx = res.data.saas_user.avatar
      }
    }

    this.getList()
  },

  methods: {
    async getList(pageNo = 1) {
      const hide = this.$message.loading('加载中', 0)
      let { keyword } = this

      const res = await getSelectUserList({
        keyword,
        pageSize: 10,
        pageNo,
        type: 'user',
      })
      if (res.code == 0) {
        let { totalCount, data } = res.data
        this.totalCount = totalCount
        this.loadUserData = data
      }
      hide()
    },

    // 选择用户
    onSelect(item) {
      this.saas_user_name = item.name
      this.saas_user_tx = item.avatar
      this.saas_user_id = item.id
      this.visibleUser = false
    },

    async submitForm() {
      if (!this.name) {
        return this.$message.warning('请输入新用户名')
      }
      if (!this.username) {
        return this.$message.warning('请输入新账户')
      }

      // if (!this.pass) {
      //   return this.$message.warning('请输入新密码')
      // }

      if (!this.saas_user_id) {
        return this.$message.warning('请选择管理员')
      }
      let param = {
        store_id: this.storeId,
        password: this.pass,
        username: this.username,
        name: this.name,
        saas_user_id: this.saas_user_id,
      }
      this.$message.loading({ content: '提交中...' })
      const res = await resetPass(param)
      if (res.code == 0) {
        this.$message.success('修改成功')
        this.pass = ''
      }
    },
  },
}
</script>

<style scoped>
.ts {
  font-size: 12px;
  color: #999;
  font-style: normal;
}
</style>
